<template>
	<view class="container">
		<view class="content">
			<view class="box" v-for="(item,index) in List" :key="item.id">
				<image class="header_img" :src="item.img"></image>
				<view class="base_status">
					<view class="base_le" :style="{color:item.state===0?'#37B64A':'#288DF8'}">
						<image :src="item.state===0?'/static/image/wx.png':'/static/image/view.png'"></image>
						<view>{{item.state===0?'跳转小程序':'web-View'}}</view>
					</view>
					<view class="base_ri">
						<view @click="headlEamend(item.id)">修改</view>
						<view @click="headleDalete(item.id,index)">删除</view>
					</view>
				</view>

			</view>

			<view class="add" @click="headleAdd">
				添加广告
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				List: [] //保存广告数据列表
			}
		},
		onLoad() {
			this.getAdvertisingList()
		},
		methods: {
			// 获取广告数据列表
			getAdvertisingList() {
				let that = this
				this.myRequesy({
					url: 'admin/ads',
				}).then(res => {
					if (res.data.code === 0) {
						that.List = res.data.data
					}
				})
			},
			// 跳转到添加广告页
			headleAdd() {
				uni.navigateTo({
					url: '../addgg/addgg'
				})
			},
			// 跳转到修改广告
			headlEamend(id) {
				uni.navigateTo({
					url: '../addgg/addgg?id=' + id
				})
			},
			// 删除广告
			headleDalete(id, index) {
				let that = this
				uni.showModal({
					title: '提示',
					content: "是否删除该广告",
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success(res) {
						if (res.confirm) {
							that.myRequesy({
								url: 'admin/ad/delete',
								method: 'POST',
								data: {
									ad_id: id
								}
							}).then(res => {
								if (res.data.code === 0) {
									this.List.splice(index, 1)
								}
							})
							return
						}

					}
				})

			},
		},
		onShow() {
			this.getAdvertisingList()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.content {
			padding: 0upx 30upx;

			.box {
				width: 690upx;
				height: 340upx;
				margin: 24upx 0upx;

				.header_img {
					border-radius: 16upx 16upx 0upx 0upx;
					width: 100%;
					height: 240upx;
				}

				.base_status {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30upx;
					box-sizing: border-box;
					background-color: #FBFBFB;
					border-radius: 0upx 0upx 16upx 16upx;

					.base_le {
						display: flex;
						align-items: center;
						font-size: 28upx;
						font-weight: 600;

						image {
							width: 40upx;
							height: 40upx;
							margin-right: 10upx;
						}
					}

					.base_ri {
						display: flex;
						align-items: center;
						color: rgba(0, 0, 0, 0.5);
						font-size: 26upx;

						view:first-child {
							margin-right: 20upx;
						}
					}
				}

			}

			.add {
				width: 690upx;
				height: 100upx;
				line-height: 100upx;
				border-radius: 16upx;
				color: rgba(85, 119, 252, 100);
				font-size: 30upx;
				text-align: center;
				border: 2upx solid rgba(85, 119, 252, 100);
				margin: 60rpx 0rpx 400upx;
			}
		}
	}
</style>
